<template>
	<view class="main-container">
		<!-- 搜索 -->
		<uni-search-bar placeholder="可输入收件人姓名或电话或订单号进行搜索" bg-color="#fff" @confirm="searchEvent" />
		<!-- 类别分段器 -->
		<u-subsection :list="subsectionList" bgColor="#dedede" active-color="#ff5a00" inactive-color="#666" mode="button"
			:current="current" @change="sectionChange"></u-subsection>
		<!-- 订单列表 -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
			:bottom="50">
			<!-- // @init="mescrollInit" @down="downCallback" @up="upCallback"为固定值,不可删改(与mescroll-mixins保持一致)
			// :down="downOption" :up="upOption" 绝大部分情况无需配置
			// :top="顶部偏移量" :bottom="底部偏移量" :topbar="状态栏" :safearea="安全区" (常用)
			// 此处支持写入原生组件 -->
			<uni-card v-for="(item, index) in list" :key="item.id" margin="0">
				<view slot="title" class="card-title">
					<view>
						<uni-section :title="'订单号：' + item.order_code">
							<template v-slot:right>
								<uni-tag :text="subsectionList.filter(itm => itm.status === item.status).map(itm => itm.name)"
									:type="subsectionList.filter(itm => itm.status === item.status).map(itm => itm.tag)"
									inverted></uni-tag>
							</template>
						</uni-section>
					</view>
				</view>
				<view class="card-body">
					<view class="goods-list">
						<!-- goods-item -->
						<view class="goods-item" v-for="(itm, idx) in item.children" :key="itm.goodsId">
							<image :src="imgPrefix + itm.mainPic" class="goods-img"></image>
							<view class="goods-detail">
								<text class="goods-title">{{itm.goodsName}}</text>
								<view class="goods-specs">
									<uni-tag :inverted="true" :text="`母：${itm.specs_female[0]}两 · ${itm.specs_female[1]}只`" type="success"
										size="mini" />
									<uni-tag :inverted="true" :text="`公：${itm.specs_male[0]}两 · ${itm.specs_male[1]}只`" type="warning"
										size="mini" />
								</view>
								<view class="goods-price">￥{{itm.goodsPrice}}</view>
							</view>
							<view class="quantity">
								&times; {{itm.quantity}}
							</view>
						</view>

						<!-- 合计 -->
						<view class="total-price">
							合计<text class="price">￥{{item.totalPrice}}</text>
						</view>
					</view>
				</view>
				<view slot="actions" class="cart-footer">
					<view class="order-buttons" v-if="item.status === 0">
						<u-button type="info" :plain="true" text="取消订单"></u-button>
						<u-button type="warning" :plain="true" text="支付订单"></u-button>
					</view>
					<view class="order-buttons" v-if="item.status === 2">
						<u-button type="info" :plain="true" text="查看单号"></u-button>
						<u-button type="info" :plain="true" text="申请售后"></u-button>
					</view>
				</view>
			</uni-card>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		API
	} from '@/config/index.js'
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		getOrderList
	} from "@/utils/wx_orders"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				imgPrefix: API + '/api/',
				orderStatus: 99,
				keywords: "",
				current: 0,
				subsectionList: [{
					status: 99,
					name: '全部',
				}, {
					status: 0,
					name: '待付款',
					tag: 'default'
				}, {
					status: 1,
					name: '已付款',
					tag: 'primary'
				}, {
					status: 2,
					name: '已发货',
					tag: 'success'
				}, {
					status: -1,
					name: '售后',
					tag: 'error'
				}],
				list: [],
				upOption: {
					noMoreSize: 5,
					textNoMore: "-- 没有更多 --",
					toTop: {
						offset: 200
					}
				}
			}
		},
		onLoad(option) {
			console.log(option.index)
			let index = option.index != 99 ? (+option.index + 1) : 0
			console.log(index)
			this.sectionChange(index)
		},
		methods: {
			searchEvent(e) {
				this.keywords = e.value
				this.refreshList()
			},
			sectionChange(index) {
				this.current = index
				this.orderStatus = this.subsectionList[index].status
				this.refreshList()
			},
			/*上拉加载的回调*/
			refreshList() {
				this.mescroll.resetUpScroll();

			},
			upCallback(page) {
				// console.log("upcallback")
				this.getMyList(page)
			},
			async getMyList(page) {
				try {
					let res = await getOrderList({
						pageSize: page.size,
						currentPage: page.num,
						status: this.orderStatus,
						keywords: this.keywords,
						openid: uni.getStorageSync('openid')
					});
					// console.log(res);

					let curPageData = res.data.rows;
					let curPageLen = curPageData.length;
					let totalSize = res.data.total;
					let totalPage = Math.ceil(totalSize / page.size);
					let hasNext = true
					if (curPageData.length < page.size) {
						hasNext = false
					} else {
						hasNext = true
					}
					if (page.num == 1) {
						this.list = []
					}
					this.list = this.list.concat(curPageData)
					this.mescroll.endByPage(curPageLen, totalPage);
				} catch (err) {
					console.log(err, '获取项目列表失败');
					this.mescroll.endErr()
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.main-container {
		background-color: #f7f7f7;
		min-height: 100vh;
		box-sizing: border-box;
		padding: 4vw 3vw;
	}

	/deep/.uni-searchbar {
		padding: 20rpx 0 !important;
	}

	/deep/.uni-card {
		margin-top: 30rpx !important;

		.card-title {
			border-bottom: 1px solid #eee;
		}

		.card-body {

			.goods-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 1px dashed #e7e7e7;

				.goods-img {
					width: 25vw;
					height: 25vw;
				}

				.goods-detail {
					width: 50vw;
					height: 25vw;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.goods-title {
						font-size: 28rpx;
					}

					.goods-specs {
						display: flex;
						flex-direction: column;
					}

					.goods-price {
						color: #ff5a00;
						font-size: 30rpx;
					}
				}
			}

			.total-price {
				margin-top: 20rpx;
				widows: 100%;
				text-align: right;
				font-size: 32rpx;

				.price {
					font-weight: bold;
					color: #ff5a00;
				}
			}
		}

		.cart-footer {
			padding: 16rpx;

			.order-buttons {
				width: 100%;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.u-button {
					width: 20vw !important;
					margin: 0 0 0 20rpx !important;
				}
			}
		}
	}
</style>